<template>
  <div class="app-container">
    <!-- 搜索 -->
    <department-search
      :init-params="initParams"
      :search-params="searchKey"
      @on-init="handleInitList"></department-search>
    <!-- 列表 -->
    <department-table
      :data="listData"
      :search-params="searchKey"
      :total-count="totalCount"
      :list-loading="listLoading"
      @on-init="handleInitList"
      @on-edit="handleEditShow"></department-table>
    <!-- 编辑弹出框 -->
    <department-edit
      :visible.sync="editInfo.visible"
      :detail-data="editInfo.detailInfo"
      @create="handleCreated"
      @update="handleUpdated"></department-edit>
  </div>
</template>

<script>
  import { getDepartmentListAPI, exportDepartmentListAPI } from '@/api/system/department'
  import { DepartmentSearch, DepartmentTable, DepartmentEdit } from './components'

  export default {
    name: 'DepartmentList',
    mixins: [],
    components: {
      DepartmentSearch,
      DepartmentTable,
      DepartmentEdit
    },
    data() {
      return {
        initParams: { // 初始化参数
          deptName: undefined, // 部门名称
          status: undefined // 状态
        },
        searchKey: {}, // 搜索参数
        editInfo: { // 编辑弹出框
          visible: false, // 是否显示模态框
          detailInfo: {}
        },
        totalCount: 0, // 分页用的列表总条数
        listLoading: false,
        listData: [] // 列表数据
      }
    },
    props: {},
    computed: {},
    methods: {
      handleEditShow(data = {}) { // 编辑－显示弹出框
        this.editInfo.visible = true
        this.editInfo.detailInfo = data
      },
      handleCreated() { // 添加成功
        this.searchKey.page = 1
        this.getListData()
      },
      handleUpdated() { // 编辑成功
        this.getListData()
      },
      handleDelete() { // 删除

      },
      handleInitList(params = {}) { // 初始化列表
        this.searchKey = {
          ...this.searchKey,
          ...params
        }
        this.getListData()
      },
      async getListData() { // 获取列表数据
        try {
          let { searchKey } = this
          this.listLoading = true
          let response = await getDepartmentListAPI({
            ...searchKey
          })
          let result = response
          if (+result.code === 200) {
            this.listData = result.data || []
            console.log(this.listData)
            // this.totalCount = result.totalElements || 0
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '获取列表失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '获取列表失败!'
          })
        } finally {
          this.listLoading = false
        }
      },
      async initData() { // 初始化数据
        this.getListData()
      }
    },
    watch: {
      initParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        immediate: true
      }
    },
    created() {
    },
    mounted() {
      this.initData()
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    &-left {
      width: 255px;
      float: left;
    }

    &-right {
      margin-left: 260px;
    }
  }
</style>
